<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="批次号">
                  <el-input
                    v-model="searchModel.bizId"
                    placeholder="批次号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="提现状态">
                  <el-radio-group @change="search" v-model="searchModel.status">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="wait_pay">待转账</el-radio-button>
                    <el-radio-button label="dealing">转账中</el-radio-button>
                    <el-radio-button label="payed">已转账</el-radio-button>
                    <el-radio-button label="failed">已取消</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="operations">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="small"
              style="width: 100%"
            >
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                  {{ scope.row.createTime }}
                </template>
              </el-table-column>
              
              <el-table-column label="提现笔数">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    {{ scope.row.totalNum }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="提现金额">
                <template slot-scope="scope">
                  <div class="text-bold-18">
                    ¥ {{ scope.row.totalMoney / 100 }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="提现状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 'payed'" class="text-success"
                    >已转账</span
                  >
                  <span
                    v-if="scope.row.status === 'dealing'"
                    class="text-danger"
                    >转账中</span
                  >
                  <span v-if="scope.row.status === 'wait_pay'" class="text-info"
                    >待转账</span
                  >
                  <span v-if="scope.row.status === 'failed'" class="text-info"
                    >已取消</span
                  >
                </template>
              </el-table-column>
            
              <el-table-column label="完成时间">
                <template slot-scope="scope">
                  {{ scope.row.endTime }}
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.status === 'wait_pay'">
                    <el-popover
                      :ref="'openEnsure' + scope.row.id"
                      placement="top"
                      width="200"
                      trigger="click"
                    >
                      <p>确认已线下转账了吗？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          size="mini"
                          type="text"
                          @click="$refs['openEnsure' + scope.row.id].doClose()"
                          >取消</el-button
                        >
                        <el-button
                          type="primary"
                          size="mini"
                          @click="handleOpenSafePay(scope.row.id)"
                          >确定</el-button
                        >
                      </div>
                      <el-button size="mini" style="margin-bottom: 16px;" type="success" slot="reference" v-permission="[
                        'ADMIN', 'partner-withdraw-record-batch::ensure-trans'
                      ]">确认已线下转账</el-button>
                    </el-popover>
                  </div>
                  <!-- <div v-if="scope.row.status === 'wait_pay'">
                    <el-button
                      v-permission="[
                        'ADMIN',
                        'partner-withdraw-record-batch::trans',
                      ]"
                      type="text"
                      @click="doTrans(scope.row.id, 0)"
                      >转账</el-button
                    >
                  </div> -->
                  <div v-if="scope.row.status === 'wait_pay'">
                    <el-popover
                      :ref="'cancel' + scope.row.id"
                      placement="top"
                      width="200"
                      trigger="click"
                    >
                      <p>确定取消转账?</p>

                      <div style="text-align: right; margin: 0">
                        <el-button
                          size="mini"
                          type="text"
                          @click="$refs['cancel' + scope.row.id].doClose()"
                          >取消
                        </el-button>
                        <el-button
                          :loading="opLoading"
                          type="primary"
                          size="mini"
                          @click="cancelTrans(scope.row.id)"
                          >确定
                        </el-button>
                      </div>
                      <el-button
                        v-if="scope.row.status === 'wait_pay'"
                        slot="reference"
                        type="danger"
                        size="mini"
                      >
                        取消转账
                      </el-button>
                    </el-popover>
                  </div>
                  <div v-if="scope.row.status === 'dealing'">
                    <el-button
                      v-permission="[
                        'ADMIN',
                        'partner-withdraw-record-batch::trans',
                      ]"
                      type="text"
                      @click="doTrans(scope.row.id, 0)"
                      >重新转账</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="searchModel.count"
              >
              </el-pagination>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {
  searchPartnerWithdrawRecordBatch,
  cancelPartnerWithdrawRecordBatch,
  transPartnerWithdrawBatchRecordBatch,
  ensureTransMoney,
} from "@/api/business";
const defaultModel = {
  status: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      visible: false,
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      curData: null,
      opLoading: false,
    };
  },
  components: {},
  methods: {
    cancelTrans(id) {
      this.opLoading = true;
      cancelPartnerWithdrawRecordBatch({ id }).then((resp) => {
        if (resp.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
        }
        this.$refs["cancel" + id].doClose();
        this.opLoading = false;
        this.init();
      });
    },
    handleOpenSafePay(id) {
      this.opLoading = true;
      ensureTransMoney({
        id
      }).then((data) => {
        if (data.success) {
          this.$notify({
            title: "操作成功",
            type: "success",
            duration: 2500,
          });
          this.$refs["openEnsure" + id].doClose();
          this.search();
        }
        this.opLoading = false;
      });
    },
    doTrans(id, ignoreErrorAccount) {
      this.loading = true;
      let form = {
        id,
        ignoreErrorAccount,
      };
      transPartnerWithdrawBatchRecordBatch(form)
        .then((resp) => {
          if (resp.success) {
            window.open(resp.data);
          }
          this.search();
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },

    search() {
      this.getList(1);
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }

      let searchModel = _.cloneDeep(this.searchModel);
      searchPartnerWithdrawRecordBatch(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;

      return searchModel;
    },
    //修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    //修改页面
    handleCurrentChange(val) {
      this.getList(val);
    },
    init() {
      this.getList(1);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
</style>
